import SyntaxHighlighter from '@/components/SyntaxHighlighter'
import { code1, code2, code3, code4, code5 } from "./codeData"
import { addCount, changeAge } from '@/redux/action'
import { useSelector, useDispatch, connect } from 'react-redux'

function UseRedux({ someStateFromRedux, connectChangeAge }) {
  const count = useSelector(state => state.count.count)
  const dispatch = useDispatch()

  const changeCount = () => {
    dispatch(addCount(1))
  }

  return (
    <div>
      <h1>Redux 的使用方法</h1>
      <h3>组件说明</h3>
      <p><b>Store：</b>存储应用全局状态的唯一容器，通过 createStore 创建。</p>
      <p><b>Action：</b>描述状态变化的纯对象，必须包含 type 字段，如 { '{ type: "CLOSE_LOADING", data: false }' }。</p>
      <p><b>Reducer：</b>纯函数，接收旧状态和 Action，返回新状态，如 { '(state, action) => newState' }。</p>
      <p><b>Dispatch：</b>唯一修改状态的途径，通过 { 'dispatch(action)' } 触发Reducer。</p>
      <p><b>Selector：</b>用于从 Store 中提取特定状态，如 useSelector 钩子。</p>
      <p><b>useDispatch 钩子</b></p>

      <h3>安装</h3>
      <SyntaxHighlighter language='json' children={code1} />

      <h3>使用</h3>
      <p>1. 在 src 目录下创建 redux 文件夹，并创建 action,reducer,store 三个文件夹</p>
      <p>2. 创建 Store 和 Reducer 以及 action</p>
      <SyntaxHighlighter children={code2} />
      <p>3. 在入口文件 main.js 里通过 Provider 包装</p>
      <SyntaxHighlighter children={code3} />
      <p>4. 在组件中使用</p>
      <SyntaxHighlighter children={code4} />
      <p>5. 也可以通过 connect 来合并自定义的 state 和 dispatch</p>
      <SyntaxHighlighter children={code5} />

      <p>通过connect绑定获取的数据：{ someStateFromRedux.user.name }</p>
      <p>通过connect绑定获取的年龄数据：{ someStateFromRedux.user.age }</p>
      <button onClick={() => connectChangeAge(8)}>通过connect绑定的dispatch来改变年龄</button>
      <p>count: { count }</p>
      <button onClick={changeCount}>改变count</button>

    </div>
  )
}

// 定义 mapStateToProps 函数，它将Redux state 映射到 props 上
const mapStateToProps = state => ({
  someStateFromRedux: state
})

const mapDispatchToProps = dispatch => ({
  connectChangeAge: data => { dispatch(changeAge(data)) }
})

export default connect(mapStateToProps, mapDispatchToProps)(UseRedux)